#header{
  .h-top{
    border-bottom: 1px solid #dadada;background: #f2f2f2;color:#666;
    a{line-height: 30px;font-size: 12px;color:#666}
    a:hover{color:red;text-decoration: underline}
    .right a{padding: 0 10px;}
    li{float: left;}
    li:nth-child(3){margin-left:5px;a{padding-left:0;}}
    li:last-child div{display: none;position: absolute}
    li:last-child:hover div{display: block;z-index:10}
  }
  .h-bot{
    height: 87px;
    padding-top:30px;
    .wrapper>div{float: left}
    .wrapper>div:nth-child(1){
      a{display:block;height: 60px;}
    }
    .logo{
      width: 394px;
    }
    .wrapper .search{
      width: 394px;margin-right: 70px;position: relative;float: right;
      .search-top{
        width: 100%;box-sizing: border-box;border: 1px solid #6b4185;
        input{width:300px;height: 36px;line-height: 36px;border: 0;padding: 0 5px;outline: none}
        span{display:inline-block;width: 80px;height: 36px;line-height:36px;background: #6b4185;float: right;color: #fff;text-align: center}
      }
      p{
        margin-top: 3px;a{font-size: 12px;color:#666;margin-right: 4px;}
      }
      a:hover{color:red;text-decoration: underline}
    }
    .wrapper .cart{
      width: 168px;height: 38px;line-height:38px;border-radius: 2px;border: 1px solid #dadada;position: relative;margin-right: 40px;
      float: right;background: #f2f2f2;
      a{float:left;display:inline-block;width:100px;height:38px;line-height:38px;font-weight: 900;font-size:14px;color:#999;}
      span{text-align:center;line-height:20px;width: 20px;height:20px;border-radius: 50%;position: absolute;top:-5px;right:21px;background: red;color:#fff}
      .icon-gouwuchekong{float:left;display:inline-block;width: 38px;height: 38px;line-height:38px;font-size: 28px;color: #6b4185;margin-left: 20px;}
      a:hover{color:red;cursor:pointer;}
    }
  }

}
body{position: relative}
#nav{background: #333;
  .navbar{
    overflow: hidden;
    >div{float: left;color:#fff}
    .category{
      width: 220px;height: 30px;background: #654579;line-height: 30px;
      p{
        text-align: center;
        .alltop{width: 12px;height: 7px;display: inline-block;margin-left: 10px;background: url(../../images/ico_arrow.png) -25px -120px no-repeat;vertical-align: middle}
      }
      .dd{
        background:#e8e3eb;z-index: 100;position:absolute;width: 220px;height: 479px;display:none;
        .dd_right{
          display: none;padding:20px 40px;width: 620px;height: 437px;border: 1px solid #654579;background: #fff;position: absolute;right:-700px;top:-1px;
          .brand{
            overflow: hidden;margin-bottom: 30px;
            dt{font-size: 12px;font-weight: 900;color: #666;}
            dd{float: left;margin-right:15px;}
          }
          .brand-bot{
            overflow: hidden;
            div:nth-child(1){
              float: left;width: 280px;
              dl{margin-bottom: 15px;}
              dt{float: left;width: 70px;}
              dd{float: right;width: 200px;margin-right: 0}
              a{font-size: 12px;color:#666;margin-right: 10px;line-height: 6px;}
              a:hover{text-decoration: underline;color: red}
            }
            div:nth-child(2){float: right;margin-right: 20px;}
          }
        }
        >dl{
          padding: 20px 20px 6px;height:93px;cursor:pointer;position: relative;
          >dt{font-size:14px;line-height: 16px;padding-bottom: 16px;span{color:#666;line-height: 16px;img{vertical-align: middle;margin-right: 10px;}}}
          >dd{
            a{color:#666;font-size: 12px;margin-right: 6px;}
            span{width: 0;height: 0;display: block;border-left: 4px;border-color: #666;position: absolute;right: 20px;top:40px;}
          }
        }
        >dl:hover{
          background: #fff;border: 1px solid #654579;border-right: none;
          .dd_right{display:block;}
        }
      }
    }
    .category:hover{
      .dd{display: block}
      .alltop{width: 12px;height: 7px;display: inline-block;margin-left: 10px;background: url(../../images/ico_arrow.png) -5px -120px no-repeat;vertical-align: middle}
    }
    .navigation{padding-left: 30px;}
    .navigation li{
      float: left;line-height: 30px;margin-right: 37px;padding: 0 10px;
      a{color: #fff}
      a:hover{color: #999}
    }
  }
}
#main{
  padding-bottom: 50px;
  .title{
    //padding-bottom: 50px;
    .link{
      height:40px;color:#666;line-height: 40px;border-bottom: 1px solid #e5e5e5;border-top:1px solid #e5e5e5;margin: 10px 0;font-size: 12px;
      li{
        float: left;padding-right: 14px;
        span{display:inline-block;width: 7px;height: 21px;background: url(../../images/ico_arrow.png) -64px -85px no-repeat;vertical-align: middle}
        a{
          color:#666;padding: 0 10px;
        }
        a:hover{text-decoration: underline}
      }
      li:nth-child(1){
        a:nth-child(1){margin: 0 10px;background: url(../../images/ico.png) 0 -45px no-repeat}
      }
    }
  }
  .content{
    .side_l{
      width: 1020px;font-size: 12px;
      .details_h{
        margin-bottom: 20px;
        .img{
          width: 378px;padding-top: 10px;
          .imgbox{width: 379px;height: 379px;border: 1px solid #e5e5e5;img{width: 100%}}
          .sharebox{
            padding-top: 30px;position: relative;
            >div{float: left}
            .share{
              span{width: 16px;height:16px;background: url(../../images/ico.png) -25px -23px;}
            }
            .collect{
              margin-left: 40px;
              span{width: 16px;height:16px;background: url(../../images/ico.png) -23px -2px;}
            }
            .msg{
              position: absolute;width: 205px;line-height: 18px;margin-top: -18px;padding: 16px 15px 18px 18px;border: 1px solid transparent;left: 130px;color:#666;z-index: 99;
              .top{
                text-align: center;
                span:nth-child(1){
                  width: 12px;height:15px;background: url(../../images/ico.png) 0px -23px;
                }
                span:nth-child(2){width: 0;height:0;border: 5px solid transparent;border-top-color:#666;margin-top: 3px}
              }
              .bot{display: none}
            }
            .msg:hover{
              border-color: #e5e5e5;background: #fff;
              .bot{display: block}
              span:nth-child(2){border-color: transparent;border-bottom-color: #666;margin-top: -5px}
            }
            span{display: inline-block;margin-right: 4px;margin-top: -2px;vertical-align: middle }
            a{color:#666;cursor:pointer;}
            a:hover{text-decoration: underline}
          }
        }
        .function{
          color:#666;padding-left: 40px;width: 600px;
          dl{overflow: hidden}
          dt{width: 80px;line-height: 40px;float: left}
          dd{float: left;}
          h1{font-weight: normal;font-size: 20px;margin-top: 10px;margin-bottom: 30px;word-wrap: break-word}
          .price{
            margin-bottom: 5px;
            dd{
              div:nth-child(1){height:40px;span:nth-child(2){font-weight: 900;font-size: 30px;margin-left: 5px;}}
              div:nth-child(2){
                position: relative;
                span:nth-child(1){display: inline-block;background: #f25e5a;color:#fff;padding: 0 2px;}
                span:nth-child(2){
                  display: inline-block;width: 14px;height: 14px;border-radius: 50%;text-align: center;line-height: 15px;border: 1px solid #e5e5e5;color:#bbb;
                  span{display:none;width: 250px;padding: 3px;border: 1px solid #e5e5e5;border-radius: 3px;position: absolute;right:-250px;top:-40px;background:transparent;color:#666}
                }
                span:nth-child(2):hover{span{display: block;}}
              }
              div:nth-child(3){padding-top:5px;color:#9d9d9d;}
            }
          }
          .saleinfo{
            padding-top: 10px;
            dd{
              line-height: 40px;border: 1px solid transparent;width: 400px;
              >span:nth-child(1){
                display: inline-block;;height: 16px;line-height: 16px;background: #c24259;padding: 0 4px;margin-right: 10px;color:#fff;
              }
              a{
                color:#666;
                span{display:inline-block;width: 0;height: 0;border: 3px solid transparent;border-left-color: #666}
              }
              a:hover{text-decoration: underline;}
            }
            dd:hover{border-color:  #e5e5e5}
          }
          .score{
            margin-top: 24px;height: 20px;padding: 10px 0;border-top: 1px dotted #e5e5e5;border-bottom: 1px dotted #e5e5e5;
            li{float: left;width: 198px;text-align: center}
            li:nth-child(1){
              span{display: inline-block;width: 11px;height: 12px;background: url(../../images/ico.png) -19px -67px no-repeat;vertical-align: middle;margin-right: 3px;}
            }
          }
          .dl_num{
            padding-top: 20px;
            div{display: inline-block;}
            dd{line-height: 40px;width: 400px;}
          }
          .btn{
            dd{
              padding-left: 80px;padding-top: 20px;
              a{width: 136px;height: 34px;line-height: 34px;display: inline-block;border: 2px solid #e14958;font-size: 16px;text-align: center}
              a:nth-child(1){color:#e14958;margin-right: 15px}
              a:nth-child(2){color:#fff;background:#e14958 }
            }
            b{display: none}
          }
          .tips{
            padding-left: 80px;padding-top: 20px;
              dd{
                span{display: inline-block;margin-right: 30px}
                i{display:inline-block;width: 20px;height: 22px;background: url(../../images/goodslist_bg.png);margin-right: 10px;vertical-align: middle}
                span:nth-child(1){i{background-position: 0 -36px}}
                span:nth-child(2){i{background-position: -67px -36px}}
                span:nth-child(3){i{background-position: 0 -8px}}
              }
          }
        }
      }
      .details_b{
        padding-top: 20px;
        .tag{
          background: #fff;width: 1200px;
          li{
            float: left;height: 36px;line-height: 36px;text-align: center;cursor:pointer;font-weight: 900;font-size: 16px;background: #fff;
            position: relative;border-color: #fff;border-top: 2px solid #fff;border-width: 3px 1px 1px;
            a{color:#666;padding: 0 30px}
            a:hover{text-decoration: underline}
            span{width: 0;height: 0;display:none;border:solid 6px #fff;border-top-color: #999;position: absolute;left:50%;margin-left: -6px;top:0}
          }
          li.active{
            border-style: solid;border-width: 3px 1px 1px;border-color: #999 #999 #FFF;
            span{display: block}
          }
          .btn{
            width:450px;
            float: right;
            display: none;
            a{width: 100px;height: 34px;line-height: 34px;display: inline-block;font-size: 16px;text-align: center}
            a:nth-child(1){font-size: 12px;span{font-size: 30px;font-weight: 900;}}
            a:nth-child(2){color:#e14958;margin-right: 5px;border: 2px solid #e14958;margin-left: 20px}
            a:nth-child(3){color:#fff;background:#e14958;border: 2px solid #e14958; }
          }
        }
        .goodsinfo{
          margin-top: -1px;border-top: 1px solid #a7a7a7;
          .info{
            width: 960px;margin: 0 auto;color:#666;font-size: 12px;
            .info1{
              padding-top: 26px;border-bottom: 1px dotted #e5e5e5;
              dt{font-size: 14px;font-weight: 900}
              dd{
                padding: 16px 0;line-height: 22px;
                span{display: inline-block;margin-right: 56px; float: left;}
              }
            }
            .info2{
              margin-top: -80px;padding-top: 80px;border-bottom: 1px dotted #e5e5e5;
              dt{font-size: 14px;font-weight: 900;padding: 26px 0 15px}
              dd{
                padding-bottom: 20px;
                img{display: block;max-width: 960px}
              }
            }
            .info3{
              margin-top: -80px;padding-top: 80px;border-bottom: 1px dotted #e5e5e5;color:#666;
              dt{padding: 26px 0 15px;font-weight: 900;font-size: 14px}
              dd{
                .info3_tag{
                  li{
                    line-height: 22px;float: left;width: 180px;height: 50px;line-height: 50px;padding-top: 20px;text-align: center;font-weight: 900;position: relative;
                    a{color:#666}
                    .line{width: 2px;height: 20px;background: #e5e5e5;position: absolute;display: block;left: 0;top:50%}
                    input{vertical-align: middle;margin-right: 3px}
                  }
                  li:nth-child(1){
                    p{line-height: 14px;
                      span{font-size: 35px;height: 38px;line-height: 38px;font-weight: 400;margin-top: -14px}
                    }
                  }
                  li:nth-child(2){a{color:#e14958}}
                  li:nth-child(5){span:nth-child(2){right:0}}
                }
                .judge{
                  li{
                    padding-left: 28px;
                    .face{
                        width: 150px;text-align: center;padding-top: 30px;
                      img{width: 40px;height:40px;}
                      p{line-height: 20px}
                    }
                    .data{
                      padding-top: 26px;width: 780px;
                      .time{
                        color:#cbcbcb;
                        .right{
                          span{display: inline-block;width: 11px;height: 12px;vertical-align: middle;margin-top: -2px;background: url(../../images/ico.png) -19px -67px no-repeat;}
                        }
                      }
                      p{padding-top: 10px;padding-top: 20px;font-size: 14px}
                    }
                  }
                }
                .page{width: 960px;height:70px;box-sizing: border-box;border: 1px solid red}
              }
            }
            .info4{
              width: 960px;margin: 0 auto;color:#666;border-bottom: 1px dotted #e5e5e5;font-size: 12px;
              dt{font-size: 14px;font-weight: 900;padding: 26px 0 15px}
              dd{width:960px;height:474px;background: url(../../images/free_shop.jpg)}
            }
            .info5{
              width: 960px;margin: 0 auto;color:#666;border-bottom: 1px dotted #e5e5e5;font-size: 12px;
              dt{font-size: 14px;font-weight: 900;padding: 26px 0 15px}
              dd{line-height: 20px;padding-bottom: 16px}
            }
          }
        }
      }
    }
    .side_r{
      width: 146px;margin-right: 15px;
      .buy{
        padding-top: 30px;
        line-height: 20px;
        .every{
          padding-bottom: 20px;
          border-top: 1px dotted #e5e5e5;
          p{
            width: 82px;margin-top: -10px;margin-left: 30px;background: #fff;text-align: center;font-size: 14px;
          }
        }
        li{
          padding-bottom: 16px;
          a{
            display: inline-block;color:#666;font-size: 12px;line-height: 20px;
            .buy_img{
              width: 140px;height:140px;background: url(../../images/details01.jpg);background-position: center center;background-size: cover;
            }
            p:nth-child(1){span{text-decoration: line-through;margin-left: 10px}}
            .more{width:146px;height:20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis}
          }
          a:hover{text-decoration: underline}
        }
        .turn{
          text-align: center;width: 140px;margin: 0 auto;
          div{
            width: 20px;height: 16px;cursor:pointer;vertical-align: middle;display: inline-block;background: url(../../images/ico_arrow.png);
          }
          .turnup{background-position: -29px -2px;margin-right: 25px}
          .turndown{background-position: 0 -2px}
        }
      }
    }
  }
}